<template>
  <div id="myform">
    <h2>表单</h2>
    <el-form action="" :model="myForm" :rules="rules" ref="myForm">
      <!-- 利用el-form-item中的prop属性进行校验 -->
      <el-form-item label="姓名" prop="name">
        <el-input v-model="myForm.name" placeholder="姓名" style="width:40%"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="myForm.age" placeholder="年龄" style="width:40%"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="myForm.address" placeholder="地址" style="width:40%"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="myForm.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="爱好" prop="hobby">
        <el-checkbox-group v-model="myForm.hobby">
          <!-- <el-checkbox label="唱歌" name="hobby"></el-checkbox>
          <el-checkbox label="跳舞" name="hobby"></el-checkbox>
          <el-checkbox label="学习" name="hobby"></el-checkbox> -->
          <el-checkbox v-for="(item,index) in myForm.hobbyList" :key="index" :label="item" ></el-checkbox>
        </el-checkbox-group>
        <p>爱好：{{myForm.hobby}}</p>
      </el-form-item>

      <el-form-item label="籍贯" prop="provins">
        <el-select v-model="myForm.provins" placeholder="请选择省份">
          <!-- <el-option label="四川" value="四川"> </el-option>
          <el-option label="重庆" value="重庆"> </el-option>
          <el-option label="北京" value="北京"> </el-option> -->
          <el-option v-for="item in myForm.provinsList" :key="item.value" :label="item.label" :value="item.label"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生年月" prop="birth">
        <el-date-picker v-model="myForm.birth" type="date" placeholder="选择日期"></el-date-picker>
        <!-- <span>时间：{{ myForm.birth }}</span> -->
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input id="remarks" type="textarea" style="width:40%" v-model="myForm.remarks"></el-input>
      </el-form-item>
      <el-button type="submit" @click="submitForm('myForm')" style="margin:20px 20%">确认</el-button>
    </el-form>
    <!-- 提交成功后显示信息 -->
    <div class="news">
      <p>姓名：{{ myForm.name }}</p>
      <p>年龄：{{ myForm.age }}</p>
      <p>地址：{{ myForm.address }}</p>
      <p>性别：{{ myForm.sex }}</p>
      <p>爱好：{{ myForm.hobby }}</p>
      <p>籍贯：{{ myForm.provins }}</p>
      <p>出生年月：{{ myForm.birth }}</p>
      <p>备注：{{ myForm.remarks }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myForm: {
        name: '',
        age: '',
        address: '',
        provins: '',
        provinsList: [
          {
            label: '四川',
            value: 1,
          },
          {
            label: '重庆',
            value: 2,
          },
          {
            label: '北京',
            value: 3,
          },
          {
            label: '上海',
            value: 4,
          },
        ],
        
        sex: '',
        hobbyList: ['唱歌', '跳舞'],
        hobby: [],
        remarks: '',
        birth: '',
      },

      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 6, message: '请输入2-6个字符', trigger: 'blur' },
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          // pattern验证
          { pattern: /^-?[0-9]\d*$/, message: '请正确输入年龄', trigger: 'blur' },
        ],
        birth: [{ required: true, message: '请选择日期', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        hobby: [{ type: 'array', required: true, message: '请至少选择一个兴趣爱好', trigger: 'change' }],

        provins: [{required: true, message: '请选择籍贯', trigger: 'change' }],
        remarks: [{ required: true, message: '请填写备注', trigger: 'blur' }],
      },
    }
  },
  methods: {
    submitForm(formName) {
        let news = document.getElementsByClassName('news')[0]
      //   if (this.myForm.name != '' && this.myForm.age != '' && this.myForm.address != '' && this.myForm.sex != '' && this.myForm.hob != '' && this.myForm.province != '' && this.myForm.mydate != '' && this.myForm.remarks != '') {
      //   } else {
      //     alert('请完善信息')
      //   }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!')
          news.style.display = 'block'
          // this.hobby=String(this.hobby)
        } else {
          console.log('error submit!!')
          return false
        }
      })
      //   console.log(news)
    },
  },
}
</script>

<style scoped>
#myform {
  width: 60%;
  margin: 0 auto;
}
form {
  border: 1px solid #ccc;
  padding: 40px;
  text-align: left;
  box-sizing: border-box;
}
.el-input,
.el-radio,
.el-checkbox {
  margin: 4px;
}
#remarks {
  vertical-align: middle;
}
.news {
  border: 1px solid #ccc;
  margin: 0 auto;
  padding-left: 20px;
  display: none;
}
</style>
